<template>
  <div class="login-container">
    <div class="login-logo">
      <div class="logo-png">
      </div>
    </div>
    <div class="login-main">
      <div class="login-card">
        <div class="form-area">
          <el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
            <el-form-item prop="username">
              <span class="svg-container svg-container_login">
                <svg-icon icon-class="user" />
              </span>
              <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="请输入账号" />
            </el-form-item>
            <el-form-item prop="password">
              <span class="svg-container">
                <svg-icon icon-class="password"></svg-icon>
              </span>
              <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
                placeholder="请输入密码"></el-input>
              <span class="show-pwd" @click="showPwd">
                <svg-icon icon-class="eye" />
              </span>
            </el-form-item>
            <el-form-item class="codeInput" v-show="showVerify" prop="verifycode">
              <div class="codeInput_box">
                <div class="codeInput_input">
                  <el-input size="small" v-model="loginForm.verifycode" placeholder="请输入验证码" class="identifyinput"></el-input>
                </div>
                <div class="codeInput_code">
                  <div class="identifybox">
                    <el-tooltip class="item" effect="dark" content="看不清，点击图片换一张" placement="right-start">
                      <div @click="refreshCode">
                        <s-identify :identifyCode="identifyCode"></s-identify>
                      </div>
                    </el-tooltip>
                  </div>
                </div>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
                登录
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="footer-info">
      © 2017-2020 电子政务办 & 神航星云 联合出品
    </div>
  </div>
</template>

<script>
  import { validateAccount, validatePassword } from "@/utils/validate";
  import SIdentify from "./components/identify";
  import md5 from "js-md5";
  export default {
    name: "login",
    data() {
      const validateUsername = (rule, value, callback) => {
        if (!validateAccount(value)) {
          callback(new Error("请输入正确的用户名"));
        } else {
          callback();
        }
      };
      const validatePass = (rule, value, callback) => {
        if (!validatePassword(value)) {
          callback(new Error("密码必须由6-20个数字与字母组成"));
        } else {
          callback();
        }
      };
      const validateVerifycode = (rule, value, callback) => {
        if (this.showVerify === false) {
          callback();
        }
        if (value === "") {
          callback(new Error("请输入验证码"));
        } else if (value !== this.identifyCode) {
          console.log("validateVerifycode:", value);
          callback(new Error("验证码不正确!"));
        } else {
          callback();
        }
      };
      return {
        loginForm: {
          username: "",
          password: ""
        },
        loginRules: {
          username: [
            { required: true, trigger: "blur", validator: validateUsername }
          ],
          password: [
            { required: true, trigger: "blur", validator: validatePass }
          ],
          verifycode: [
            { required: true, trigger: "blur", validator: validateVerifycode }
          ]
        },
        showVerify: false,
        loading: false,
        pwdType: "password",
        identifyCode: "",
        identifyCodes: "abcdefghijklmnopqrstuvwxyz1234567890"
      };
    },
    methods: {
      showPwd() {
        if (this.pwdType === "password") {
          this.pwdType = "";
        } else {
          this.pwdType = "password";
        }
      },
      handleLogin() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.loading = true;
            let loginParam = {
              username: this.loginForm.username,
              password: md5(this.loginForm.password)
            }
            this.$store
              .dispatch("Login", loginParam)
              .then(() => {
                this.loading = false;
                this.$router.push({ path: "/" });
                this.$store.dispatch("GetOptions").then(() => { });
              })
              .catch(() => {
                this.loading = false;
                this.loginForm.password = null;
                this.showVerify = true;
              });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      randomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
      },
      refreshCode() {
        this.identifyCode = "";
        this.makeCode(this.identifyCodes, 4);
      },
      makeCode(o, l) {
        console.info("makcode");
        for (let i = 0; i < l; i++) {
          this.identifyCode += this.identifyCodes[
            this.randomNum(0, this.identifyCodes.length)
          ];
        }
        console.info(this.identifyCode);
      }
    },
    components: {
      SIdentify
    }
  };
</script>
<style scoped>
  .codeInput_box {
    width: 250px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
  }

  .codeInput_input {
    width: 130px;
    height: 50px;
  }

  .codeInput_code {
    height: 50px;
    width: 110px;
    display: flex;
    align-items: center;
  }

  .codeInput_code .identifybox {
    height: 38px;
    cursor: pointer;
  }

  .codeInput {
    display: flex;
    align-items: center;
    height: 50px;
    width: 100%;
  }

  .form-area {
    height: 400px;
    width: 433px;
    background: none;
    margin-left: 317px;
    /* padding: 0px 80px 0px 50px; */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  .login-container .el-form {
    width: 250px !important;
  }

  .login-container .svg-container {
    font-size: 18px !important;
    color: #409eff;
  }

  .login-container {
    /* position: fixed; */
    height: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    /* flex-direction: column; */
  }

  .footer-info {
    width: 100%;
    color: #494949;
    text-align: center;
    font-size: 15px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .logo-png {
    /* background-image: url(../../assets/login/login-logo3-01.png); */
    width: 490px;
    height: 98px;
  }

  .login-logo {
    min-width: 1130px;
    width: 100%;
    height: 98px;
  }

  .login-card {
    width: 750px;
    height: 400px;
    background-image: url(../../assets/login/login111-01.png);
    background-color: #fff;
    background-size: cover;
    border-radius: 6px;
    box-shadow: 0px 5px 20px 2px #205bb2;
  }

  .login-main {
    min-width: 1130px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(100% - 100px - 90px);
    background-image: url("../../assets/login/login-bg-01.png");
    background-size: cover;
  }
</style>

<style rel="stylesheet/scss" lang="scss">
  $bg: #2d3a4b;
  $light_gray: #eee;

  /* reset element-ui css */

  .login-container {
    .el-input {
      display: inline-block;
      height: 47px;
      width: 80%;
      input {
        border: 0px;
        -webkit-appearance: none;
        border-radius: 0px;
        padding: 12px 5px 12px 15px;
        color: $light_gray;
        height: 46px;
        color: #333;
        &:-webkit-autofill {
          -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
          -webkit-text-fill-color: #333 !important;
        }
      }
    }
    .el-form-item {
      background: #fff;
      color: #454545;
      border-bottom: 1px solid #dcdfe6;
      width: 100%;
    }
  }
</style>